const {resolve} =require('path')
// 导入把html页面生成到内存中的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入webpack
const webpack =require('webpack')


const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'index.js',
        path:resolve(__dirname,'./dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
            },
            {
                test: /\.scss$/,
                use: [ 'style-loader', 'css-loader', 'sass-loader' ]
            },
            {
                test: /\.jpg|png|gif|bmp$/,
                use:  'url-loader'
                //可以使用？给url-loader传递参数，limit表示图片的大小
                //$name=[hash:8]-[name].[ext]
            },
            {
                test: /\.js$/,
                use:'babel-loader',exclude:/node_modules/

            },
            { //解析组 
                test:/\.vue$/,use:['vue-loader']
            },
            {
                test:/\.ttf|woff|woff2|eot|svg$/,
                use:'url-loader'
            }
            // {
            //     exclude:/.(css|js|html)$/,
            //     loader:'file-loader',

            //     // 解决输出名字太长
            //     options:{
            //         name:'[hash:10].[ext]'
            //     }
            // },



        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html' //指定，将来在内存中复制出来的页面，名称叫做index
        }),
        new VueLoaderPlugin()
    ],
    mode:'development'
}